<template>
  <div class="info-form">
    <div class="input-item">
      <label>用户名</label>
      <div class="input-item-content">
        <input placeholder="HuiAizr" type="text" name id />
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="input-item">
      <label>手机号</label>
      <div class="input-item-change">
        <div class="content">
          <span>
            已绑定：
            <b style="color:#F56C6C">181******33</b>
          </span>
          <span>可用手机号加密码登录慕课网，可通过手机号找回密码</span>
        </div>
        <el-button @click="toggleChangePhone" class="btn" plain type="info" round>更换手机号</el-button>
      </div>
    </div>
    <div class="input-item">
      <label>E-mail</label>
      <div class="input-item-content">
        <input placeholder="HuiAizr" type="text" name id />
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="input-item">
      <label>密码</label>
      <div class="input-item-change">
        <div class="content">
          <span>已设置</span>
          <span>保护账号信息和登录安全</span>
        </div>
        <el-button @click="toggleChangePass" class="btn" plain type="info" round>更换密码</el-button>
      </div>
    </div>
    <div class="input-item">
      <label>城市</label>
      <el-form class="el-form">
        <el-form-item class="provinces">
          <el-select class="input" @change="showCityNames" v-model="province" placeholder="省级地区">
            <el-option v-for="item in provinces" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="city">
          <el-select :disabled="disabledCity" class="input" v-model="city" placeholder="市级地区">
            <el-option v-for="(item,idx) in cityNames" :key="idx" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="input-item">
      <label>我的格言</label>
      <div class="input-item-content">
        <textarea style="resize:none;height:100px;" placeholder="HuiAizr" name id />
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="input-item">
      <label>职业经历</label>
      <div class="input-item-content">
        <textarea style="resize:none;height:100px;" placeholder="HuiAizr" name id />
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="input-item">
      <el-button type="primary">保存</el-button>
    </div>
    <change-phone @close-changPhone="toggleChangePhone" v-show="ChangePhone" />
    <change-pass @close-changPass="toggleChangePass" v-show="ChangePass" />
  </div>
</template>

<script>
import { getCity } from "@/api/common";
import { getMinzu } from "@/api/teacher";
import { Button, Form, FormItem, Select, Option } from "element-ui";
export default {
  components: {
    ElButton: Button,
    ElFormItem: FormItem,
    ElSelect: Select,
    ElOption: Option,
    ElForm: Form,
    ChangePhone: () => import("./ChangePhone"),
    ChangePass: () => import("./ChangePass")
  },
  data() {
    return {
      cityData: {},
      province: "",
      cityNames: [],
      provinces: [],
      city: "",
      minzuData: {},
      disabledCity: true,
      ChangePhone: false,
      ChangePass: false
    };
  },
  created() {
    this.formData = new FormData();
    getCity().then(res => {
      this.cityData = res.data;
      let keys = Object.keys(this.cityData);
      for (let i = 0; i < keys.length; i++) {
        this.provinces.push(this.cityData[keys[i]][0].province);
      }
    });
    getMinzu().then(res => {
      this.minzuData = res.data.data.map(item => {
        return item.name;
      });
    });
  },
  methods: {
    toggleChangePhone() {
      this.ChangePhone = !this.ChangePhone;
      if (this.ChangePhone) {
        document.body.style.overflow = "hidden";
      } else {
        document.body.style.overflow = "visible";
      }
    },
    toggleChangePass() {
      this.ChangePass = !this.ChangePass;
      if (this.ChangePass) {
        document.body.style.overflow = "hidden";
      } else {
        document.body.style.overflow = "visible";
      }
    },
    showCityNames() {
      this.disabledCity = false;
      let keys = Object.keys(this.cityData);
      for (let i = 0; i < keys.length; i++) {
        if (this.cityData[keys[i]][0].province === this.province) {
          for (
            let j = 0, k = Object.keys(this.cityData[keys[i]]).length;
            j < k;
            j++
          ) {
            this.cityNames.push(this.cityData[keys[i]][j].name);
          }
          break;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.input-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 30px;
  .el-form {
    height: auto;
    padding: 15px 0 0 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .provinces {
      margin: 0;
    }
    .city {
      margin: 0;
      margin-left: 30px;
    }
  }
  label {
    font-size: 18px;
    margin: 5px 0;
    color: #455a64;
  }
  .input-item-change {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn {
      margin-right: 40px;
    }
    .content {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      span {
        color: #93999f;
        padding: 10px 0;
        display: block;
      }
    }
  }
  .el-button--primary {
    background-color: #409eff;
    border-color: #409eff;
    &:hover {
      background-color: rgb(111, 183, 255);
      border-color: rgb(111, 183, 255);
    }
  }
  .input-item-content {
    position: relative;
    width: 100%;
    input,
    textarea {
      color: #606266;
      width: 100%;
      height: 30px;
      padding: 7px 0;
      font-size: 18px;
      outline: none;
      border: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      background: #fff;
      letter-spacing: 1px;
      &:focus ~ span {
        transform: scaleX(1);
      }
    }
    span:nth-of-type(1) {
      position: absolute;
      bottom: 0;
      left: 0;
      transform: scaleX(0);
      transition: all 0.3s ease-in-out;
      transform-origin: right center;
      width: 50%;
      height: 3px;
      background-color: rgba(179, 233, 114, 0.829);
    }
    span:nth-of-type(2) {
      position: absolute;
      transform: scaleX(0);
      transition: all 0.3s ease-in-out;
      transform-origin: left center;
      bottom: 0;
      right: 0;
      width: 50%;
      height: 3px;
      background-color: rgba(179, 233, 114, 0.9);
    }
  }
}
</style>